<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
<script src="{{URL::asset('js/jquery.min.js')}}"></script>
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
<style media="screen">
#main .myForm{
	max-width: 600px;
}
#main .el-tab-pane{
	overflow-y: auto;
}
</style>
<div id="main">
	<el-tabs type="border-card">
		@foreach($Tabs as $tab)
		<el-tab-pane label="{{$tab['label']}}">
			<p style="color:#C0C4CC">
				<i class="el-icon-info"></i>
				<i>{{$tab['desc']}}</i>
			</p>
			<table class="table" style="min-width:750px;">
				<tr>
					<td>名称</td>
					<td>键(唯一标识)</td>
					<td>值</td>
					<td>描述</td>
					<td>操作</td>
				</tr>
				@foreach($tab['cfg'] as $cfg)
				<el-form label-width="100px" :model="form.cfg_{{$cfg['id']}}" class="cfgForm" inline>
					<tr>
						<td>
							<el-input v-model="form.cfg_{{$cfg['id']}}.label" size="mini">
							</el-input>
						</td>
						<td>
							<el-input v-model="form.cfg_{{$cfg['id']}}.k" size="mini">
							</el-input>
						</td>
						<td>
							<el-input v-model="form.cfg_{{$cfg['id']}}.v" size="mini">
							</el-input>
						</td>
						<td>
							<el-input v-model="form.cfg_{{$cfg['id']}}.desc" size="mini"></el-input>
						</td>
						<td>
							<el-tooltip effect="dark" content="删除配置" placement="bottom"
								:open-delay="500" :hide-after="1500">
								<el-button circle size="mini" type="danger"
									@click="destory({{$cfg['id']}})" plain icon="el-icon-delete">
								</el-button>
							</el-tooltip>
							<el-tooltip effect="dark" content="提交修改" placement="bottom"
								:open-delay="500" :hide-after="1500">
								<el-button circle size="mini" type="primary"
									@click="submitEdit({{$cfg['id']}})" plain icon="el-icon-edit">
								</el-button>
							</el-tooltip>
						</td>
					</tr>
				</el-form>
				@endforeach

			</table>

			<p align="right">
				<el-button type="danger" plain size="small" icon="el-icon-delete" @click="destory({{$tab['id']}})">删除接口</el-button>
				<a href="/admin/api_mgr/create?id={{$tab['id']}}">
					<el-button type="primary" plain size="small" icon="el-icon-plus">新增配置</el-button>
				</a>
				<a href="/admin/api_mgr/{{$tab['id']}}/edit">
					<el-button type="success" plain size="small" icon="el-icon-edit">编辑接口</el-button>
				</a>
			</p>
		</el-tab-pane>
		@endforeach
		<el-tab-pane label="新增接口">
			<el-form label-width="100px" :model="form.create" :rules="rules.create" ref="create_form" class="myForm">
				<el-form-item label="名称" prop="label">
					<el-input v-model="form.create.label" required clearable></el-input>
				</el-form-item>
				<el-form-item label="描述" prop="desc">
					<el-input v-model="form.create.desc" type="textarea"></el-input>
				</el-form-item>
				<el-form-item label=" ">
					<el-button type="primary" plain @click="submitCreate">提交</el-button>
				</el-form-item>
			</el-form>
		</el-tab-pane>
	</el-tabs>
</div>
<script type="text/javascript">
$(function() {
	$.get("{{URL::asset('admin/api_mgr/get_form')}}",function(res){
		let main = new Vue({
			el:"#main",
			data:function() {
				return {
					form:res.data,
					rules:{
						create:{
							label:[
								{required:true,message:'请填写名称',trigger:['blur','change']},
								{min:2,max:45,message:'长度在2到45个字符',trigger:['blur','change']}
							],
							desc:[
								{max:255,message:'长度最多255个字符',trigger:['blur','change']}
							],
						},
						cfgs:{
							label:[
								{required:true,message:'请填写名称',trigger:['blur','change']},
								{min:2,max:45,message:'长度在2到45个字符',trigger:['blur','change']}
							],
							k:[
								{required:true,message:'请填写键',trigger:['blur','change']},
								{min:1,max:255,message:'长度在1到255个字符',trigger:['blur','change']}
							],
							v:[
								{required:true,message:'请填写值',trigger:['blur','change']},
								{min:1,max:255,message:'长度在1到255个字符',trigger:['blur','change']}
							],
							desc:[
								{max:255,message:'长度最多255个字符',trigger:['blur','change']}
							]
						}
					}
				}
			},
			methods:{
				submitCreate(){
					this.$refs["create_form"].validate((valid) => {
						if (valid) {
							let url = "{{URL::asset('admin/api_mgr')}}";
							let param = this.form.create;
							$.post(url,param,function(res) {
								main.ajaxResponse(res);
							});
						}else{
							this.$notify.info({title:"Notice",message:'填写不符合要求，请修改后再提交'});
						}
		        	});
				},
				ajaxResponse(res) {
					if(res.code == 1){
						this.$confirm(res.msg,'Success', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'Success'
				        }).then(() => {
							location.reload();
				        }).catch(() => {
							location.reload();
						});
					}else{
						this.$notify.error({title:"Error",message:res.msg});
					}
				},
				destory(id) {
					this.$confirm('删除后不可恢复是否继续？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						$.ajax({
					        method:'DELETE',
					        url:"{{URL::asset('admin/api_mgr')}}/"+id,
					        data:{
								_token:"{{csrf_token()}}"
							},
					        success:function(res){
					            main.ajaxResponse(res);
					        },
					        error: function () {
					            main.$notify.error({title:"Error",message:"请求失败，请稍后..."});
					        }
					    });
					}).catch(() => {});
				},
				submitEdit(id) {
					let url = "{{URL::asset('admin/api_mgr')}}"+"/"+id;
					let param = this.form["cfg_"+id];
					$.ajax({
				        method:'PUT',
				        url:url,
				        data:param,
				        success:function(res){
				            main.ajaxResponse(res);
				        },
				        error: function () {
				            main.$notify.error({title:"Error",message:"请求失败，请稍后..."});
				        }
				    });
				}
			}
		});
	})
});
</script>
